<template>
	<div>
		<tableTool @toolAddBtn="toolAddBtn" @toolDels='toolDels' @toolSearch='toolSearch'></tableTool>

		<div>
			<div style="margin-bottom: 16px">

				<span style="margin-left: 8px">
				</span>
			</div>
			<a-table  rowKey='id' :scroll="{ x: 1500}"  :row-selection="{ selectedRowKeys: selectedRowKeys, onChange: onSelectChange }" :columns="columns"
			 :pagination='{
				  showQuickJumper:true
			  }' :loading='false' :data-source="data">

				<span slot="tags" slot-scope="text">
					<a-tag v-for="item in text" :key='item' :color="item==1?'volcano':item==2?'green':''">
						{{item==1?'超级管理员':''}}
						{{item==2?'管理员':''}}
					</a-tag>
				</span>
			</a-table>



			<a-modal v-model="visible" title="添加" ok-text="确认" cancel-text="取消" @ok="onSubmit">
				<a-form-model ref="ruleForm" :model="form" :rules="rules" :label-col="labelCol" :wrapper-col="wrapperCol">
					<a-form-model-item ref="name" label="姓名" prop="name">
						<a-input v-model="form.name" @blur="
			        () => {
			          $refs.name.onFieldBlur();
			        }
			      " />
					</a-form-model-item>
					
					<a-form-model-item ref="password" label="密码" prop="password">
											<a-input v-model="form.password" type='password' @blur="
					  () => {
					    $refs.name.onFieldBlur();
					  }
					" />
					</a-form-model-item>
					<a-form-model-item label="权限" prop="type">
					  <a-checkbox-group v-model="form.type">
					    <a-checkbox value="1" name="type">
					      超级管理员
					    </a-checkbox>
					    <a-checkbox value="2" name="type">
					      管理员
					    </a-checkbox>
					  </a-checkbox-group>
					</a-form-model-item>
				</a-form-model>
			</a-modal>







		</div>

	</div>
</template>

<script>
	import tableTool from '../../components/tableTool.vue';

	const columns = [
		{
			title: 'id',
			dataIndex: 'id',
			key: 'id',
			fixed: 'left',
			width:150,
		},
		{
			title: '用户名',
			dataIndex: 'userName',
			key: 'userName',
		},
		{
			title: '邮箱', 
			dataIndex: 'email',
			key: 'email'
		},
		{
			title: '权限',
			dataIndex: 'jurisdiction',
			key: 'jurisdiction',
			scopedSlots: {
				customRender: 'tags'
			},
		},
		{
			title: '修改时间',
			key: 'time',
			dataIndex: 'time',
		},
		{
			title: '操作',
			key: 'operation',
			dataIndex: 'operation',
		},
	];

	const data = [
		{
			id: 1,
			userName: '赵佳宇',
			email: '1065008032@qq.com',
			jurisdiction: [1, 2],
			time: '2013-11-11 23:03:11',
			operation: 'aa'

		}


	];


	export default {
		data() {
			return {
				form: {
					name: '赵佳宇',
					password:'123',
					type: [],
				},
				rules: {
					name: [{
							required: true,
							message: '请输入用户名',
							trigger: 'blur'
						},
						{
							min: 3,
							max: 5,
							message: 'Length should be 3 to 5',
							trigger: 'blur'
						},
					],
					password: [{
							required: true,
							message: '请输入密码',
							trigger: 'blur'
						}
					],
					region: [{
						required: true,
						message: 'Please select Activity zone',
						trigger: 'change'
					}],
					date1: [{
						required: true,
						message: 'Please pick a date',
						trigger: 'change'
					}],
					type: [{
						type: 'array',
						required: true,
						message: 'Please select at least one activity type',
						trigger: 'change',
					}, ],
					resource: [{
						required: true,
						message: 'Please select activity resource',
						trigger: 'change'
					}, ],
					desc: [{
						required: true,
						message: 'Please input activity form',
						trigger: 'blur'
					}],
				},

				labelCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 5
					},
					md: {
						span: 4
					},
				},
				wrapperCol: {
					xs: {
						span: 24
					},
					sm: {
						span: 12
					},
					md: {
						span: 18
					},
				},
				visible: false,
				data,
				columns,
				selectedRowKeys: [], // Check here to configure the default column
				loading: false,
			}
		},
		components: {
			tableTool
		},
		computed: {
			hasSelected() {
				return this.selectedRowKeys.length > 0;
			},
		},
		methods: {
			onSubmit() {
				this.$refs.ruleForm.validate(valid => {
					if (valid) {
						alert('submit!');
					} else {
						console.log('error submit!!');
						return false;
					}
				});
			},
			resetForm() {
				this.$refs.ruleForm.resetFields();
			},
			toolAddBtn() {
				this.visible = true;
			},
			toolDels() {},
			toolSearch(e) {
				console.log(e);
			},
			start() {
				this.loading = true;
				// ajax request after empty completing
				setTimeout(() => {
					this.loading = false;
					this.selectedRowKeys = [];
				}, 1000);
			},
			onSelectChange(selectedRowKeys) {
				console.log(selectedRowKeys)
				console.log('selectedRowKeys changed: ', selectedRowKeys);
				this.selectedRowKeys = selectedRowKeys;
			},
		}
	}
</script>

<style>
</style>
